<template>
  <div>
    <!-- 搜索 -->
    <!-- 附加项目  -->
    <TopFilter :list="topFilterInit" :cols="3" :collapse="collapse" labelWidth="140" @filterChange="changeHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      height="auto"
      ref="table"
      :columns="columns"
      :params="fetchParams"
      :fetchapi="fetchapi"
      :datakey="'records'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectChange"
    >
    </FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <multiuse-button type="primary" @click="saveDialog">添加</multiuse-button>
      <multiuse-button @click="closeDialog">关 闭</multiuse-button>
    </div>
  </div>
</template>
<script>
  import { getFuJiaXiangMuListByPage } from '@/api/claim/dealer/AuthApplication';

  export default {
    // mixins: [dictionary],
    data() {
      return {
        visible: false,
        visibleDrawer: false,
        collapse: false,
        infoId: null,
        topFilterInit: this.topFilterInitFun(),
        flterValue: {}, //参数
        columns: this.creatHeader(),
        fetchapi: getFuJiaXiangMuListByPage,
        fetchParams: {}, //ipa 接口
        selectedRows: [] //选中经销商
      };
    },
    created() {
    },
    methods: {
      //搜索数据
      topFilterInitFun() {
        return [
          { type: 'INPUT', label: '附加项目代码', fieldName: 'addCode', placeholder: '请输入', initialValue: '' },
          { type: 'INPUT', label: '附加项目名称', fieldName: 'addName', placeholder: '请输入', initialValue: '' }
        ];
      },
      //搜索获取数据
      changeHandle(val) {
        this.fetchParams = val;
        console.log(val);
      },
      //table表头和数据源
      creatHeader() {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          { title: '附加项目代码', dataIndex: 'addCode', sorter: true },
          { title: '附加项目名称', dataIndex: 'addName', sorter: true },
          { title: '附加项目费用', dataIndex: 'addAmount', sorter: true },
          { title: '备注', dataIndex: 'addRemark', sorter: true }
        ];
      },
      //选中
      selectChange(rows) {
        this.selectedRows = rows;
        console.log(this.selectedRows);
      },
      //保存
      saveDialog() {
        this.$emit('save', this.selectedRows);
      },
      //取消操作
      closeDialog() {
        this.$emit('close', { visible: false, data: this.selectedRows, type: 'close' });
      },
      chooseOrderNo() {
        this.visible = true;
      }
    }
    // mounted() {
    //   this.BaseTable = this.$refs.listModal.$refs.pageTable;
    // }
  };
</script>

<style lang="less" scoped></style>
